

<template>
  <div id="app">
    <!-- 查询表单 -->
    <!--    欢迎{{this.user.username}}登录-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入名称"></el-input>
      </el-form-item>

      <el-form-item label="证件号码">
        <el-input v-model="formInline.zjhm" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="通讯地址">
        <el-input v-model="formInline.dz" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="设备编号">
        <el-select v-model="formInline.sid" placeholder="请输入"  clearable>
          <el-option v-for="s in sbList" :label="s.brand" :value="s.id"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="性别">
        <el-select v-model="formInline.sex" placeholder="全部" clearable>
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定设备">
        <el-select v-model="formInline.wid" placeholder="请输入"  clearable>
          <el-option v-for="s in sbList" :label="s.name" :value="s.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="info" @click="toAdd()" plain>添加</el-button>
    <!--    <el-button type="primary" @click="daochu()">导出</el-button>-->

    <!--表格用来展示数据-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号"
      >
      </el-table-column>

      <el-table-column
          prop="name"
          label="名称"
      >
      </el-table-column>

      <el-table-column
          prop="sex"
          label="性别"
      >
      </el-table-column>

      <el-table-column
          prop="age"
          label="年龄"
      >
      </el-table-column>

      <el-table-column
          prop="zjhm"
          label="证件号码"
      >
      </el-table-column>

      <el-table-column
          prop="status"
          label="健康状况"
      >
      </el-table-column>

      <el-table-column
          prop="lxhm"
          label="联系号码"
      >
      </el-table-column>
      <el-table-column
          prop="sid,wid"
          label="绑定设备"
      >
        <template slot-scope="scope">
          <!--          {{scope.row.bh}}-{{scope.row.bdsb}}-->
          {{scope.row.sid==1?"AAA":scope.row.sid==2?"BBB":scope.row.sid==3?"CCC":scope.row.sid==4?"DDD":scope.row.sid==5?"WWW":scope.row.wid==6?"FFF":scope.row.sid==7?"EEE":"TTT"}}-{{scope.row.wid==1?"智能手表":scope.row.wid==2?"头盔":scope.row.wid==3?"视频设备":scope.row.wid==4?"手机":scope.row.wid==5?"手环":scope.row.wid==6?"智能手套":scope.row.wid==7?"智能玩具":"智能电脑"}}
        </template>
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="update(scope.row.id)" size="mini">修改</el-button>
          <el-button type="text" @click="del(scope.row.id)" size="mini">删除</el-button>
          <el-button type="text" @click="xq1(scope.row.id)" size="mini">查看</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>


  </div>
</template>

<style >

</style>

<script>
// @ is an alias to /src
import axios from "axios"

export default {
  data(){
    return{
      /*
        data:就是用来定义数据的要用什么就自己定义什么
        []:数组，集合
        {}:对象(里面有属性)
         */
      tableData:[],
      pageNum:1,
      pageSize:2,
      total:0,
      formInline:{},
      user:{},
      roomList:[],
      dialogVisible:false,
      dialogVisible2:false,
      ruleForm:{},
      ruleForm2:{},
      imageUrl:"",
      sbList:[],
    }
  },
  methods:{
    /*！！！！！！！！！！！
    methods:这个里面定义的全部都是方法
    现在是spring boot+vue 框架
    不一样的就是在 从vue框架里面的methods里面
    通过方法去请求路径(请求的路径就是后台的路径)
    拿到数据放到下面的created()里面来加载数据才能在页面展示

    ***html使用ajxa 请求controller  controller把数据返回给前端 不再去跳转页面了***

     */
    lx() {
      this.axios.get(`http://localhost:9010/fw/sbList`).then(res => {
        this.sbList = res.data.data;
      })
    },




    findPage(){ //查询所有加分页参数
      this.axios.post(`http://localhost:9010/fw/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.formInline).then(res=>{
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
        if (this.pageNum>res.data.data.pages){
          this.pageNum=res.data.data.pages;
          this.findPage();
        }
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum=val;
      this.findPage();
    },
    xq1(id){
      this.$router.push({path:"/jkgl1",query:{id:id}})
    },
    toAdd(){
      this.$router.push({path:"/jkgl2"})
    },
    update(id){ //修改回显数据方法
      /* this.axios.get(`http://localhost:9010/fw/toUpdate?id=${id}`).then(res=>{

       })*/
      this.$router.push({path:"/jkgl2",query:{id:id}})
    },


    del(id){ //删除方法
      this.$confirm("确定要删除吗?一旦删除,该条信息将不能恢复。", '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get(`http://localhost:9010/fw/deleteById?id=${id}`).then(res=>{
          if (res.data.code==200){
            this.$message.success("删除成功");
          }else{
            this.$message.error("删除失败！");
          }
          this.findPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

  },
  created(){
    /*
    ！！！！！！！！！！注意created()：
    这个里面才是可以把数据展示到页面的方法
    思考那个方法是要把数据放到前台 就在这个里面写那个方法
     */
    // var userDB=sessionStorage.getItem("userDB"); //从login.html页面的session域中拿到的数据
    // if (userDB==null){
    //   location.href="#/login";
    // }
    // this.user=JSON.parse(userDB);//动态获取显示登录人的数据 因为从session域中拿出来所以要转换数据类型
    this.findPage();
    this.lx();//展示所有的数据
    // this.xialaList();//动态获取下拉框的数据
  }
}
</script>
